<template>
  <div class="mod-config">
    <div class="box-container" v-loading="loading">
      <div class="triangle"></div>
      <div class="card-state_font">已激活</div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="showOrCloseDrawer()"
            >授权记录</el-button
          >
        </div>
        <div class="card-content">
          <div class="card-right">
            <div class="name">{{ ssaData.softwareName }}</div>
            <div class="label">
              <div class="identity">{{ ssaData.identity }}</div>
              <div class="version">
                <template>
                  <span v-if="ssaData.trial === 1">试用版</span>
                  <span v-else>正式版</span>
                </template>
              </div>
            </div>
            <div class="info">
              <label class="lable-text">平台版本</label>
              <div class="info-value">{{ ssaData.softwareVersion }}</div>
            </div>
            <div class="info">
              <label class="lable-text">所在服务器</label>
              <div class="info-value">{{ ssaData.ip }}</div>
            </div>
            <div class="info">
              <label class="lable-text">最近到期</label>
              <div class="info-value">{{ ssaData.expireDate }}</div>
            </div>
          </div>
        </div>
        <div class="card-foot"></div>
      </el-card>
    </div>
    <el-drawer title="软件授权记录" :visible.sync="authRecordVisible">
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
        <el-table-column header-align="center" align="center" label="#" width="50">
          <template slot-scope="scope">
            <span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="softwareName"
          header-align="center"
          align="center"
          label="软件名称"
          min-width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="identity"
          header-align="center"
          align="center"
          label="软件标识"
          min-width="140"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="trial"
          header-align="center"
          align="center"
          label="软件类型"
          min-width="80"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.trial === 1" type="warning">试用版</el-tag>
            <el-tag v-else type="success">正式版</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="softwareVersion"
          header-align="center"
          align="center"
          label="软件版本"
          min-width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="ip"
          header-align="center"
          align="center"
          label="所在服务器"
          min-width="140"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="authDate"
          header-align="center"
          align="center"
          label="授权日期"
          min-width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="optBy"
          header-align="center"
          align="center"
          label="操作人"
          min-width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="optTime"
          header-align="center"
          align="center"
          label="操作时间"
          min-width="160"
          :show-overflow-tooltip="true"
          fixed="right"
        >
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ssaData: {
        softwareName: '',
        softwareVersion: '',
        identity: '',
        expireDate: '',
        trial: 1,
        ip: '',
      },

      loading: false,
      authRecordVisible: false,

      pageIndex: 1,
      pageSize: 10000,
      totalPage: 0,
      dataList: [],
      dataListLoading: false,
    };
  },
  components: {},
  activated() {
    this.loadSoftwareAuthData();
  },
  methods: {
    //获取软件权限信息
    loadSoftwareAuthData() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl('/ssa/syssoftwareauth/loadSsa'),
        method: 'get',
        params: this.$http.adornParams({}),
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            Object.assign(this.ssaData, data.data);
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //打开授权记录
    showOrCloseDrawer() {
      console.log('do click');
      if (this.authRecordVisible) {
        this.authRecordVisible = false;
      } else {
        this.authRecordVisible = true;
        this.loadSsaRecord();
      }
    },

    // 获取数据列表
    loadSsaRecord() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/ssa/syssoftwareauthrecord/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
        }),
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount;
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
  },
};
</script>
<style scoped lang="less">
.box-container {
  position: relative;
  width: 30%;

  .triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-color: transparent #049e31;
    border-width: 0 4px 4px 0;
    border-style: solid;
    position: absolute;
    left: -4px;
    top: 28px;
  }

  .card-state_font {
    display: inline-block;
    padding: 0 12px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    color: #fff;
    background-color: #0acb42;
    position: absolute;
    top: 4px;
    left: -4px;
  }

  .box-card /deep/ .el-card__header {
    border-bottom: none;
  }

  .box-card /deep/ .el-card__body {
    padding: 0px 20px 30px 20px;
  }

  .card-content {
    display: flex;
  }

  .card-right {
    flex: 1 1 100%;
    display: inline-block;
    margin: 0 64px 0 86px;

    .name {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
      line-height: 30px;
      margin-top: 12px;
    }

    .label {
      display: flex;
      font-size: 14px;
      margin-top: 8px;
      margin-bottom: 16px;

      .identity {
        display: inline-block;
        color: rgab(0, 0, 0, 0.7);
        text-align: center;
        line-height: 20px;
        padding: 3px 8px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 12px;
      }

      .version {
        background: #f5eee8;
        color: #ff952c;

        display: inline-block;
        color: rgab(0, 0, 0, 0.7);
        text-align: center;
        line-height: 20px;
        padding: 3px 8px;
        border-radius: 12px;
        margin-left: 4px;
      }
    }

    .info {
      margin-top: 8px;
      display: -webkit-box;
      display: flex;

      .lable-text {
        color: rgba(0, 0, 0, 0.4);
        line-height: 18px;
      }

      .info-value {
        margin-left: 12px;
        color: rgba(0, 0, 0, 0.7);
        line-height: 18px;
        display: -webkit-inline-box;
        display: inline-flex;
      }
    }
  }
}
</style>
